<template>
  <div>
    <span class="avatar-dropdown"  v-if="workbenches == '1'">
      <el-avatar class="user-avatar" :src="avatar" style="cursor: default" />
      <div class="username">
        <span class="hidden-xs-only"  style="cursor: default">{{ username }}</span>
      </div>
    </span>
    <el-dropdown @command="handleCommand" @visible-change="handleVisibleChange" v-if="workbenches == '0'">
    <span class="avatar-dropdown">
      <el-avatar class="user-avatar" :src="avatar" />
      <div class="username">
        <span class="hidden-xs-only">{{ username }}</span>
        <vab-icon
          class="vab-dropdown"
          :class="{ 'vab-dropdown-active': active }"
          icon="arrow-down-s-line"
        />
      </div>
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="logout">
            <vab-icon icon="logout-circle-r-line" />
            <span>{{ translateTitle('退出登录') }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

</template>
<script lang="ts" setup>
  import { useUserStore } from '/@/store/modules/user'
  import { toLoginRoute } from '/@/utils/routes'
  import { translateTitle } from '/@/utils/i18n'
  import {removeToken} from "/@/utils/token";
  import {staff_getInfo} from "/@/api/staff";
  import {ElMessage, ElMessageBox} from "element-plus";
  import homeList from "/@/views/index/storeList";
  //存储个人信息
  const homeDate = homeList()
  const route = useRoute()
  const router = useRouter()
  // 判断钉钉工作台登录
  const workbenches:any = ref(localStorage.getItem('workbenches') || '0')
  const userStore = useUserStore()
  const { avatar, username } = storeToRefs(userStore)
  const { logout } = userStore
  const active = ref(false)
 onMounted(()=>{
   workbenches.value = localStorage.getItem('workbenches') || '0'
   staff_getInfo({}).then((data:any)=>{
     if(data.code){
       homeDate.set_information(data.data)
       userStore.setUsername(data.data.name)
       userStore.setAvatar(data.data.avatar)
     }
   })
 })
  const handleVisibleChange = (value: boolean) => {
    active.value = value
  }
  const handleCommand =  (command: any) => {
    /*switch (command) {
      case 'logout':
        await logout()
        //退出登录会閃到 首页
        setTimeout(()=>{
          router.push(toLoginRoute(route.fullPath))
        },200)
        // await router.push(toLoginRoute(route.fullPath))
        break
      case 'personalCenter':
        await router.push('/setting/personalCenter')
        break
    }*/
   // open.value=true
    ElMessageBox.confirm(
      '退出登录后，再进入系统需要重新扫码登录哦！',
      '确认退出',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        draggable: true,
        showClose:false,
        // type: 'warning',
        // type: 'warning',
        // center: true,
      }
    )
      .then(async() => {
        switch (command) {
          case 'logout':
            await logout()
            //退出登录会閃到 首页
            setTimeout(()=>{
              router.push(toLoginRoute(route.fullPath))
            },200)
            // await router.push(toLoginRoute(route.fullPath))
            break
          case 'personalCenter':
            await router.push('/setting/personalCenter')
            break
        }
      })
      .catch(() => {

      })

  }
</script>

<style lang="scss" scoped>
  .avatar-dropdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;

    .user-avatar {
     /* box-sizing: border-box;
      width: 40px;
      height: 40px;
      padding: 8px;*/
      margin-left: 15px;
     /* cursor: pointer;
      border-radius: 50%;*/
    }

    .username {
      position: relative;
      display: flex;
      align-content: center;
      align-items: center;
      height: 40px;
      margin-left: 6px;
      line-height: 40px;
      cursor: pointer;

      [class*='ri-'] {
        margin-left: 0 !important;
      }
    }
    .title{
      :deep(){
      .el-message-box__title{
        font-weight: 600;
      }
    }
    }
  }
</style>
